<template>
  <div class="customer">
    <van-nav-bar
        title="代办事项列表"
        left-arrow
        left-text="返回"
        @click-left="back"
    />
    <van-search
        v-model="fbillno"
        show-action
        background="#57a3f3"
        placeholder="请输入单号"
    >
      <template #action>
        <van-button size="small" type="info" @click="onSearch()" style="width: 60px;">查询</van-button>
      </template>
    </van-search>
    <!--操作按钮-->
    <div class="actionButton">
      <van-button size="small" icon="plus" type="info" @click="toAdd">新增</van-button>
      <van-button style="margin-left: 4px" size="small" icon="search" type="info" @click="superQuery">高级查询</van-button>
    </div>
    <!--表格区域--->
    <div style="width: 100%;height: 100%;background: #ffffff;margin-top: 10px">
      <van-list style="overflow: scroll">
        <div class="listColumn">
          <div>是否延期</div>
          <div>单号</div>
          <div>待办人</div>
          <div>客户名称</div>
          <div>商机名称</div>
          <div>计划完成日期</div>
          <div>事项名称</div>
          <div>完成内容</div>
          <div>完成人</div>
          <div>完成时间</div>
          <div>完成状态</div>
          <div>操作</div>
        </div>
        <div class="listItem" v-for="(task, index) in taskList" :key="index" @click.stop="toDetail(task)">
          <div>{{ task.isDelayName }}</div>
          <div>{{ task.fbillno }}</div>
          <div>{{ task.createBy }}</div>
          <div>{{ task.fcustomer }}</div>
          <div>{{ task.sjname }}</div>
          <div>{{ task.fendtime }}</div>
          <div>{{ task.fname }}</div>
          <div>{{ task.fnote }}</div>
          <div>{{ task.finisher }}</div>
          <div>{{ task.finishtime }}</div>
          <div>{{ task.fstatusName }}</div>
          <div>
            <div class="btnWrapper">
              <a class="btn1" @click.stop="toDetail(task)">详情</a>
              <a v-show="task.fstatus == '0'" class="btn1" @click.stop="toEdit(task)">编辑</a>
              <a v-show="task.fstatus == '0'" class="btn2" @click.stop="toDelete(task)">删除</a>
              <a v-show="task.fstatus == '0'" class="btn2" @click.stop="toFinsih(task)">完成</a>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <!--分页-->
    <div>
      <van-pagination v-model="pageNo" mode="simple" :total-items="total" :show-page-size="6" :items-per-page="pageSize" force-ellipses @change="changePg">
        <template #prev-text>
          <van-icon name="arrow-left" />
        </template>
        <template #next-text>
          <van-icon name="arrow" />
        </template>
        <template #page="{ text }">{{ text }}</template>
      </van-pagination>
    </div>
    <!--高级筛选-->
    <van-popup v-model="searchVisible" position="top" :style="{height: '42%'}">
      <div style="margin-top: 15px">
        <van-cell-group>
          <van-field label="待办人" v-model="createBy" placeholder="请输入待办人" />
        </van-cell-group>
        <van-cell-group>
          <van-field label="商机名称" v-model="sjname" placeholder="请输入商机名称" />
        </van-cell-group>
        <van-cell-group>
          <van-field label="客户名称" v-model="fcustomer" placeholder="请输入客户名称" />
        </van-cell-group>
        <van-cell-group>
          <van-field readonly clickable @click="chooseFun('状态', columnsFstatus, 1)" label="状态" v-model="fstatusName" placeholder="请选择状态" />
        </van-cell-group>
        <van-cell-group>
          <van-field readonly clickable @click="chooseFun('是否延期', columnsIsDelay, 2)" label="是否延期" v-model="isDelayName" placeholder="请选择是否延期" />
        </van-cell-group>
<!--        <van-cell-group>-->
<!--          <van-field label="商机建立日期" readonly clickable @click="onChangeDate" v-model="createTimeRange" placeholder="请选择商机建立日期" />-->
<!--        </van-cell-group>-->
        <div class="super-search">
          <van-button block @click="searchReset">重置</van-button>
          <van-button block type="info" @click="searchQuery">确定</van-button>
        </div>
      </div>
    </van-popup>
    <!--多个日期-->
    <van-calendar v-model="dateShow" type="range" @confirm="onConfirm" />
    <!--选择-->
    <van-popup v-model="showPickerFun" position="bottom">
      <van-picker
          :title="choosetitle"
          show-toolbar
          :columns="columnsFun"
          @confirm="changeFun"
          @cancel="showPickerFun = false"
      />
    </van-popup>
    <!--完成-->
    <van-dialog v-model="isShowFinish" title="完成" :show-cancel-button="false" :show-confirm-button="false">
      <van-form>
        <van-field
            readonly
            clickable
            v-model="reportObj.finishtime"
            name="finishtime"
            label="完成时间"
            placeholder="完成时间"
            @click="showFtimeClick"
        >
        </van-field>
        <van-field
            name="fattachment"
            label="附件"
            placeholder="附件">
          <template #input>
            <van-uploader accept="image/*,.pdf,.doc,.xls" :after-read="uploadAfter" :preview-image="false">
              <van-button icon="plus" type="info">上传文件</van-button>
            </van-uploader>
          </template>
        </van-field>
        <div class="uploadWrapper">
          <div class="uploadItem" v-for="(upload, index) in reportObj.fattachment" :key="index" @click="handlePreview(upload)">{{ upload.filepath }}</div>
        </div>
        <div style="margin: 16px;">
          <van-row :gutter="16">
            <van-col span="12">
              <van-button type="default" size="large" @click="onCancel()">取消</van-button>
            </van-col>
            <van-col span="12">
              <van-button type="info" size="large" @click="onSubmit()" :loading="loading" :disabled="loading">提交</van-button>
            </van-col>
          </van-row>


        </div>
      </van-form>
    </van-dialog>
    <!--日期选择-->
    <van-popup v-model="showFtimePicker" position="bottom">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          @confirm="onConfirmFtime"
          @cancel="showFtimePicker = false"
      />
    </van-popup>
  </div>
</template>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
import { mapState } from 'vuex'
import { ywTaskList, ywTaskListDelete, getDicts, sernodeList, uploadFile} from '@/api/api'
import { Notify, Dialog, Toast } from 'vant'
import moment from "moment";
import {filterObj} from "../../utils/utils";
import {httpAction} from '@/api/manage'

var sha1 = require('js-sha1')

export default {
  name: "myTaskList",
  components: {
  },
  data () {
    return {
      id: '',
      isShowFinish: false,
      showFtimePicker: false,
      currentDate: '',
      reportObj: {
        finishtime: '',
        fattachment: [],
      },
      fopportunityid: '',
      fbusinessid: '',
      fnodeid: undefined,
      ftype: '',
      choosetitle: '',
      createBy: '',
      sjname: '',
      fbillno: '',
      fcustomer: '',
      fstatus: '',
      fstatusName: '',
      isDelay: '',
      isDelayName: '',
      createTime_begin: '',
      createTime_end: '',
      createTimeRange: '',
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      searchVisible: false,
      dateShow: false,
      showPickerFun: false,
      taskList: [],
      columnsFstatus: [],
      columnsIsDelay: [],
      columnsFun: [],
    }
  },
  computed: {
    ...mapState({
      openId: state => state.user.openId,
      access_token: state => state.app.access_token,
      ticket: state => state.app.ticket,
      appId: state => state.user.appId
    })
  },
  mounted() {
  },
  created () {
    this.fbusinessid = this.$route.params.fbusinessid
    this.fopportunityid = this.$route.params.fopportunityid
    sernodeList({
      id: this.fbusinessid,
      fbusinessid: this.fopportunityid
    }).then(res => {
      if(res.success) {
        let filtArr = []
        filtArr = res.result.filter(item => item.fcolor == 2)
        this.fnodeid = filtArr.length ? filtArr[0].id : undefined
      }
    })
    this.getList(1)
    getDicts('tasktype').then(res => {
      if(res.success) {
        this.columnsFstatus = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
    getDicts('fchecked').then(res => {
      if(res.success) {
        this.columnsIsDelay = res.result.map(item => {
          return {
            text: item.text,
            code: item.value
          }
        })
      }
    })
  },
  methods: {
    searchReset () {
      this.fbillno = ''
      this.fstatus = ''
      this.fstatusName = ''
      this.isDelay = ''
      this.isDelayName = ''
      this.sjname = ''
      this.createBy = ''
      // this.createTimeRange = ''
      // this.createTime_begin = ''
      // this.createTime_end = ''
      this.fcustomer = ''
    },
    searchQuery () {
      this.searchVisible = false
    },
    superQuery () {
      this.searchVisible = true
    },
    onChangeDate () {
      this.dateShow = true
    },
    onConfirm (date) {
      console.log(date)
      this.createTime_begin = moment(date[0]).format('YYYY-MM-DD')
      this.createTime_end = moment(date[1]).format('YYYY-MM-DD')
      this.createTimeRange = moment(date[0]).format('YYYY-MM-DD') + '~' + moment(date[1]).format('YYYY-MM-DD')
      this.dateShow = false
    },
    chooseFun (title, columns, ftype) {
      this.showPickerFun = true
      this.ftype = ftype
      this.choosetitle = title
      this.columnsFun = columns
    },
    changeFun (value, index) {
      console.log(value, index)
      switch (this.ftype) {
        case 1:
          this.fstatusName = value.text
          this.fstatus = value.code
          break;
        case 2:
          this.isDelay = value.code
          this.isDelayName = value.text
          break;
      }
      this.showPickerFun = false
    },
    onSearch () {
      this.getList(1)
    },
    getList (pageNo) {
      let params = filterObj({
        sjname: this.sjname,
        fbillno: this.fbillno,
        fstatus: this.fstatus,
        isDelay: this.isDelay ,
        createBy: this.createBy,
        // createTime_begin: this.createTime_begin,
        // createTime_end: this.createTime_end,
        fcustomer: this.fcustomer,
        fopportunityid: this.fopportunityid
      })
      ywTaskList({
        ...params,
        pageNo: pageNo,
        pageSize: this.pageSize
      }).then(res => {
        if (res.success) {
          this.taskList = res.result.records
          this.total = res.result.total
        }else {
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }

      })
    },
    changePg () {
      this.getList(this.pageNo)
    },
    toAdd () {
      this.$router.push({name: 'myTaskAdd', params: {isAdd: true, pid: undefined, fopportunityid: this.fopportunityid, fnodeid: this.fnodeid }})
    },
    toDetail (task) {
      this.$router.push({name: 'myTaskAdd', params: {isDetail: true, pid: task.pid, fopportunityid: this.fopportunityid, fnodeid: this.fnodeid }})
    },
    toEdit (task) {
      this.$router.push({name: 'myTaskAdd', params: {isAdd: false, pid: task.pid, fopportunityid: this.fopportunityid, fnodeid: this.fnodeid }})
    },
    toDelete(task) {
      Dialog.confirm({
        message: '是否删除该条管理信息数据？',
      }).then(() => {
        ywTaskListDelete({pid: task.pid}).then(res => {
          if (res.success) {
            Notify({ type: 'success', message: '代办事项信息删除成功!', duration: 4000 })
            this.onSearch()
          }else {
            Notify({ type: 'warning', message: res.message, duration: 4000 })
          }
        })
      })
          .catch(() => {
            // on cancel
          });
    },
    showFtimeClick () {
      this.showFtimePicker = true
      this.currentDate = new Date()
    },
    onConfirmFtime(val) {
      this.reportObj.finishtime = moment(val).format('YYYY-MM-DD')
      this.showFtimePicker = false
    },
    uploadAfter (file) {
      let formData = new FormData()
      formData.append('file', file.file);
      formData.append('bizPath', "crm");
      uploadFile(formData).then(res => {
        if (res.success) {
          this.reportObj.fattachment.push({
            filepath: res.message
          })
          Notify({ type: 'success', message: '上传成功', duration: 4000 })
        }else {
          Notify({ type: 'danger', message: res.result, duration: 4000 })
        }
      })
    },
    handlePreview (record) {
      let url = 'http://124.221.130.190:8081/hwerJK/sys/common/static/' + record.filepath
      window.open(url)
    },
    toFinsih (task) {
      this.isShowFinish = true
      this.id = task.id
      this.reportObj = Object.assign({}, {finishtime: '',fattachment: []})
    },
    onSubmit () {
      if (!this.reportObj.finishtime) {
        Toast('请选择完成时间！')
        return false
      }
      this.loading = true
      let fattachment = this.reportObj.fattachment.map(item => item.filepath).join()
      httpAction('/yw_task/ywTask/doComplete?id=' + this.id + '&finishtime=' + this.reportObj.finishtime + '&fattachment=' + fattachment, {}, 'post').then((res)=>{
        if(res.success){
          this.loading = false
          this.getList()
          this.isShowFinish = false
          Notify({ type: 'success', message: res.message, duration: 4000 })
        } else {
          this.loading = false
          Notify({ type: 'danger', message: res.message, duration: 4000 })
        }
      }).finally(() => {
      })
    },
    onCancel () {
      this.isShowFinish = false
    },
    back () {
      this.$router.push({name: 'sjInfoList'})
    },
  }
}
</script>

<style scoped>
.customer{
  min-height: 100vh;
  background: #ffffff;
}
.actionButton {
  display: flex;
  flex-direction: row;
  margin: 4px;
}
.listColumn{
  width: 2400px;
  display: flex;
  line-height: 45px;
  background: #eee;
}
.listColumn div:nth-of-type(1) {
  width: 150px;
}
.listColumn div:nth-of-type(2) {
  width: 150px;
}
.listColumn div:nth-of-type(3) {
  width: 150px;
}
.listColumn div:nth-of-type(4) {
  width: 300px;
}
.listColumn div:nth-of-type(5) {
  width: 300px;
}
.listColumn div:nth-of-type(6) {
  width: 150px;
}
.listColumn div:nth-of-type(7) {
  width: 300px;
}
.listColumn div:nth-of-type(8) {
  width: 300px;
}
.listColumn div:nth-of-type(9) {
  width: 150px;
}
.listColumn div:nth-of-type(10) {
  width: 150px;
}
.listColumn div:nth-of-type(11) {
  width: 150px;
}
.listColumn div:nth-of-type(12) {
  width: 150px;
}
.listItem{
  width: 2400px;
  display: flex;
  line-height: 38px;
  border-bottom: 1px solid #eeeeee;
}
.listItem div:nth-of-type(1) {
  width: 150px;
}
.listItem div:nth-of-type(2) {
  width: 150px;
}
.listItem div:nth-of-type(3) {
  width: 150px;
}
.listItem div:nth-of-type(4) {
  width: 300px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 显示省略号来代表被修剪的文本 */
}
.listItem div:nth-of-type(5) {
  width: 300px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 显示省略号来代表被修剪的文本 */
}
.listItem div:nth-of-type(6) {
  width: 150px;
}
.listItem div:nth-of-type(7) {
  width: 300px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 显示省略号来代表被修剪的文本 */
}
.listItem div:nth-of-type(8) {
  width: 300px;
  white-space: nowrap;       /* 确保文本不会换行 */
  overflow: hidden;          /* 隐藏溢出的内容 */
  text-overflow: ellipsis;   /* 显示省略号来代表被修剪的文本 */
}
.listItem div:nth-of-type(9) {
  width: 150px;
}
.listItem div:nth-of-type(10) {
  width: 150px;
}
.listItem div:nth-of-type(11) {
  width: 150px;
}
.listItem div:nth-of-type(12) {
  width: 150px;
}
.super-search {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;;
}
.van-sidebar-item--select::before {
  background-color: #1989fa;
}
.btnWrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #1989fa;
}
.btn1 {

}
.btn2 {

}
.btn3 {

}
.uploadWrapper {
  display: flex;
  flex-direction: column;
  color: #1989fa;
  font-size: 14px;
}
.uploadItem {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>